<template>
	<view class="index-page page">
		<scroll-view :scroll-y="true" class="content">
			<loading v-if="showLoading"></loading>
			<CustomNav :normal="{ textColor: '#fff', background: '#FF2F34' }" :title="title" :isBack="true"></CustomNav>
			<view class="top-block">
				<view class="search-block">
					<view class="input-block">
						<view class="input-left">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/search.png"
								mode=""></image>
							<input placeholder="请输入关键字" v-model="conf.businessName" @confirm="search" />
						</view>
						<view class="search" @click="search">
							搜索
						</view>
					</view>
				</view>
			</view>
			<view class="info-block">
				<view class="screen">
					<view class="all">
						<picker class="text" :range="industry" range-key="name" :value="industryIndex"
							@change="bindIndustry">
							{{industry[industryIndex]['name']}}
						</picker>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
					<view class="all">
						<view class="text" @click="screen(1)" :class="sort==1?'active':''">附近</view>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
					<view class="all">
						<view class="text" @click="screen(2)" :class="sort==2?'active':''">智能排序</view>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
				</view>
				<template v-if="list.length>0">
					<view class="shop-block1" v-for="(item,index) in list" :key="item.id"
						@click="navigate('/page_other/activity/merchant?id='+item.id+'&longitude='+longitude+'&latitude='+latitude)">
						<view class="shop-item">
							<view class="shop-left">
								<image :src="cloudStorage+item.businessFace" style="width: 200rpx;height: 180rpx;"
									mode="aspectFill">
								</image>
							</view>
							<view class="shop-right">
								<view class="shop-title">{{item.businessName}}</view>
								<view class="label-item" v-if="item.label">
									<view class="label-info">
										<image
											src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/renqi.png"
											class="img">
										</image>
										<view class="tips">{{item.label||''}}</view>
									</view>
								</view>

								<view class="shop-address">
									<view class="address-left">
										<image
											src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/site.png">
										</image>
										<view class="address">{{item.address}}</view>
									</view>
									<view class="address-right">
										<image
											src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/distance.png">
										</image>
										<view class="distance">{{item.distance}}km</view>
									</view>
								</view>
							</view>
						</view>
						<view class="line" v-if="item.limitedTimeOffer"></view>
						<view class="preference" v-if="item.limitedTimeOffer">
							<view class="timeOut">限时优惠</view>
							<view class="discount">{{item.limitedTimeOffer}}</view>
						</view>
					</view>
				</template>
				<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
				<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav';
	// import {
	// 	getUserBusinessList,
	// } from '@/api/acticity.js';
	import {
		getBusinessTypeList,
		getAllBusinessList
	} from '@/api/home.js';
	import {
		isMore
	} from '@/util/util.js'
	import {
		getStorage
	} from '@/util/auth';
	export default {
		data() {
			return {
				title: '',
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				more: true,
				sort: 0,
				type: '',
				latitude: '',
				longitude: '',
				form: {
					isIndustry: '',
				},
				industryIndex: 0,
				industry: [],
				list: [],
				typeId: 0,
				areaInfo: {
					areaId: ''
				}
			};
		},
		async onLoad(e) {
			if (e.type) {
				console.log(e.type)
				this.form.isIndustry = e.type
				this.typeId = e.type
				this.title = e.title
			}
			if (getStorage('position')) {
				this.areaInfo = getStorage('position');
			}
			uni.showCustomLoading();
			Promise.all([this.getUserBusinessList(true), this.getBusinessTypeList()]).finally(() => {
				uni.hideCustomLoading()
			})

		},
		methods: {
			search() {
				this.getUserBusinessList(true)
			},
			screen(e) {
				this.sort = e
				this.conf.page = 1
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserBusinessList(true)
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserBusinessList(true)
			},
			//获取商家类型
			getBusinessTypeList() {
				return getBusinessTypeList().then((res) => {
					let list = res || []
					var obj = {
						id: 0,
						name: '全部'
					}
					list.unshift(obj)
					this.industry = list
					this.industryIndex = this.industry.findIndex(item => item.id == this.typeId);
				})
			},
			//商家活动列表
			getUserBusinessList(refresh = false) {
				uni.getLocation({
					success: (current) => {
						this.latitude = current.latitude;
						this.longitude = current.longitude;
						uni.setStorageSync('latitude', this.latitude)
						uni.setStorageSync('longitude', this.longitude)
						return getAllBusinessList({
							page: this.conf.page,
							limit: this.conf.limit,
							latitude: this.latitude,
							longitude: this.longitude,
							businessName: this.conf.businessName,
							sort: this.sort,
							type: this.form.isIndustry,
							areaId: this.areaInfo.areaId
						}).then((res) => {
							let list = res.list || [];
							if (refresh) {
								this.list = list;
							} else {
								this.list = [...this.list, ...list]
							}
							this.more = isMore(this.conf.page, this.conf.limit, res.count)
						})
					},
					fail: (e) => {
						this.showToast('获取位置失败，请重试！');
					}
				})
			},
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
				this.conf.page = 1
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserBusinessList(true)
			},
			onChange(e) {
				console.log(e)
			},
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserBusinessList();
			}
		},
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;

		.top-banner {
			width: 100%;
		}

		.content {
			width: 100%;
			//height: calc(100vh - 160rpx);
			overflow-y: auto;
			position: relative;

			.top-block {
				width: 100%;
				height: 220rpx;
				margin-top: 160rpx;
				background-color: #FF2F34;
				padding: 30rpx;
			}

			.search-block {
				width: 100%;
				height: 70rpx;
				display: flex;


				.address-block {
					display: flex;
					background-color: #FFFFFF;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					border-radius: 50px;
					margin-right: 20rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

					.address {
						color: #FF2F34;
						font-size: 28rpx;
					}
				}

				.input-block {
					display: flex;
					background-color: #FFFFFF;
					border-radius: 50px;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 6rpx 6rpx 6rpx 20rpx;

					.input-left {
						width: calc(100% - 140rpx);
						display: flex;

						image {
							width: 30rpx;
							height: 30rpx;
							// margin-right: 5rpx;
							margin: 7rpx 7rpx 0 0;
						}

						input {
							border-radius: 50px;
							width: 100%;

						}
					}

					.search {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 130rpx;
						border-radius: 50rpx;
						height: 100%;
						padding-bottom: 5rpx;
						color: #FFFFFF;
						background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
					}
				}
			}

			.info-block {
				position: relative;
				background-color: #f7f6f9;
				margin-top: -60rpx;
				border-radius: 50rpx 50rpx 0 0;
				padding: 30rpx;

				.screen {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.all {
						display: flex;
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #3D3D3D;
							margin-right: 10rpx;
						}

						.text.active {
							color: #FF2F34;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.shop-block {
					margin-top: 20rpx;
					display: flex;
					width: 100%;
					background-color: #FFFFFF;
					padding: 30rpx;
					border-radius: 20rpx;

					.shop-left {
						width: 200rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.shop-right {
						width: calc(100% - 220rpx);

						.shop-title {
							font-size: 32rpx;
							color: #1A1A1A;
							font-weight: bold;
						}

						.shop-tips {
							margin-top: 12rpx;
							width: 80%;
							padding: 5rpx 10rpx;
							background-color: #FEF3EF;
							display: flex;
							align-items: center;
							border-radius: 10rpx;
							text-align: center;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}

							.tips {
								font-size: 24rpx;
								color: #FF6831;
								font-weight: normal;
							}
						}

						.shop-score {
							display: flex;
							align-items: center;
							margin-top: 12rpx;

							.score {
								font-size: 28rpx;
								margin-left: 5rpx;
								color: #FF2F34;
							}
						}

						.shop-address {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 40rpx;

							.address-left {
								display: flex;
								justify-content: center;
								align-items: center;
								width: calc(100% - 60rpx);

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 8rpx;
								}

								.address {
									font-size: 24rpx;
									color: #767676;
								}
							}

							.address-right {
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 4rpx;
								}

								.distance {
									font-size: 24rpx;
									color: #767676;
								}
							}
						}
					}

				}

				.shop-block1 {
					width: 100%;
					background-color: #FFFFFF;
					padding: 30rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.line {
						width: 100%;
						height: 2rpx;
						background-color: #EEEEEE;
						margin: 20rpx 0;
					}

					.preference {
						display: flex;
						justify-content: center;

						.timeOut {
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							margin-right: 8rpx;
							font-size: 24rpx;
							background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
							color: #FFFFFF;
						}

						.discount {
							font-size: 28rpx;
							color: #FF2F34;
						}
					}

					.shop-item {
						margin-top: 20rpx;
						display: flex;
						width: 100%;
						background-color: #FFFFFF;
					}

					.shop-left {
						width: 200rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.shop-right {
						width: calc(100% - 220rpx);

						.label-item {
							display: flex;
							align-items: center;

							.label-info {
								display: flex;
								align-items: center;
								background: #FEF3EF;
								padding: 6rpx 18rpx;
								margin-top: 20rpx;
								border-radius: 6rpx;

								.img {
									width: 25rpx;
									height: 25rpx;
									margin-right: 10rpx;
								}

								.tips {
									font-size: 24rpx;
									color: #FF6830;
								}
							}
						}

						.shop-title {
							font-size: 32rpx;
							color: #1A1A1A;
							font-weight: bold;
						}

						.shop-tips {
							margin-top: 12rpx;
							width: 100%;
							padding: 5rpx 10rpx;
							background-color: #FEF3EF;
							display: flex;
							align-items: center;
							border-radius: 10rpx;
							text-align: center;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}

							.tips {
								font-size: 24rpx;
								color: #FF6831;
								font-weight: normal;
							}
						}

						.shop-score {
							display: flex;
							align-items: center;
							margin-top: 12rpx;

							.score {
								font-size: 28rpx;
								margin-left: 5rpx;
								color: #FF2F34;
							}
						}

						.shop-address {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 40rpx;

							.address-left {
								display: flex;
								justify-content: center;
								align-items: center;
								width: calc(100% - 100rpx);

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 8rpx;
								}

								.address {
									width: calc(100% - 40rpx);
									font-size: 24rpx;
									color: #767676;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}

							.address-right {
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 4rpx;
								}

								.distance {
									font-size: 24rpx;
									color: #767676;
								}
							}
						}
					}
				}
			}

			.empty {
				text-align: center;
			}
		}
	}
</style>